import styles from './index.module.css'
import { useState } from 'react'

import { Button, Form, Input, ConfigProvider, message } from 'antd'

import { login } from '../api/login'
import { useNavigate } from 'react-router-dom'

// 首页
function Index({ onIndex }: { onIndex: () => void }) {
  return (
    <div>
      <div className={styles.card}>
        <div style={{
          lineHeight: '25px',
          textAlign: 'center',
        }}>
          <p>一个年轻人的轻奢交友贴吧</p>
          <p>致力打造年轻人交友的轻奢平台</p>
          <p>轻奢帖吧</p>
        </div>
        <div style={{
          display: 'flex',
          flexDirection: 'row',
          gap: '10px',
          // justifyContent: 'space-between',
          alignItems: 'baseline'
        }}>
          <div>——————————</div>
          <div className={styles.button} onClick={onIndex}>探究一番</div>
          <div>——————————</div>
        </div>
      </div>
    </div>
  )
}

// 注册
function Register({ onRegister }: { onRegister: () => void }) {
  // const page = 
  return (
    <div className={styles.card_login}>
      <h1>注册</h1>
      <ConfigProvider theme={{
        components: {
          Form: {
            labelColor: 'white'
          }
        }
      }}>
        <Form style={{ width: '400px' }} 
        labelCol={{span: 5}} >
          <Form.Item name="password" label="昵称" rules={[{ required: true, message: '请输入密码' }]} >
            <Input placeholder='请输入昵称' />
          </Form.Item>
          <Form.Item name="account" label="账号" rules={[{ required: true, message: '请输入账号' }]} style={{ color: 'white' }} >
            <Input placeholder='请输入账号' />
          </Form.Item>
          <Form.Item name="password" label="密码" rules={[{ required: true, message: '请输入密码' }]} >
            <Input placeholder='请输入密码' />
          </Form.Item>
          <Form.Item name="password" label="确认密码" rules={[{ required: true, message: '请输入密码' }]} >
            <Input placeholder='请输入密码' />
          </Form.Item>
          <Form.Item name="password" label="出生年月" rules={[{ required: true, message: '请输入密码' }]} >
            <Input placeholder='出生年月' />
          </Form.Item>
          <Form.Item name="password" label="性别" rules={[{ required: true, message: '请输入密码' }]} >
            <Input placeholder='性别' />
          </Form.Item>
          <Form.Item name="password" label="邮箱  " rules={[{ required: true, message: '请输入密码' }]} >
            <Input placeholder='邮箱' />
          </Form.Item>
          <Form.Item>
            <Button color="primary" variant="solid" htmlType="submit" style={{ width: '100%' }}>注册</Button>
            <Button variant="solid" onClick={onRegister} style={{ width: '100%', marginTop: '10px' }}>返回</Button>
          </Form.Item>
        </Form>
      </ConfigProvider>
    </div>
  )
}

// 登录
function Login({ onLogin }: { onLogin: () => void }) {
  type LoginForm = {
    account: string
    password: string
  }
  const [messageApi, messageContextHolder] = message.useMessage()
  const navigate = useNavigate()
  const handleSubmit = (values: LoginForm) => {
    login(values).then(res => {
      if (res.code === 200) {
        localStorage.setItem('token', res.data.token)
        localStorage.setItem('user', JSON.stringify(res.data.user))
        messageApi.success(res.msg)
        navigate('/home')
      }
    })
  }

  return (
    <div className={styles.card_login}>
      {messageContextHolder} {/* 🔥 确保 message 组件正确渲染 */}
      <h1>登录</h1>
      <ConfigProvider theme={{
        components: {
          Form: {
            labelColor: 'white'
          }
        }
      }}>
        <Form<LoginForm> onFinish={handleSubmit} style={{ width: '300px' }} >
          <Form.Item name="account" label="账号" rules={[{ required: true, message: '请输入账号' }]} style={{ color: 'white' }} >
            <Input placeholder='请输入账号' />
          </Form.Item>
          <Form.Item name="password" label="密码" rules={[{ required: true, message: '请输入密码' }]} >
            <Input placeholder='请输入密码' />
          </Form.Item>
          <Form.Item>
            <Button color="primary" variant="solid" htmlType="submit" style={{ width: '100%' }}>登录</Button>
            <Button variant="solid" onClick={onLogin} style={{ width: '100%', marginTop: '10px' }}>注册</Button>
          </Form.Item>
        </Form>
      </ConfigProvider>
    </div>
  )
}


// 页面
function Page() {
  const [pageName, setPageName] = useState<'index' | 'login' | 'register'>('index')
  return (
    <div className="content">
      {pageName === 'index' ? (<Index onIndex={() => setPageName('login')} />) :
        pageName === 'login' ? (<Login onLogin={() => setPageName('register')} />) :
          <Register onRegister={() => setPageName('login')} />}
    </div>
  )
}



export default Page;